<template>
  <div class="page">
    <div class="searchline">
      <el-input
        placeholder="职位名称"
        v-model="search.name"
        size="medium"
        style="width: 200px; margin-left: 12px"
      ></el-input>
      <el-input
        placeholder="公司名称"
        v-model="search.company_name"
        size="medium"
        style="width: 200px; margin-left: 12px"
      ></el-input>
      <el-input
        placeholder="公司地址"
        size="medium"
        v-model="search.company_address"
        style="width: 200px; margin-left: 12px"
      ></el-input>
      <el-select
        placeholder="公司行业"
        v-model="search.company_industry"
        size="medium"
        style="width: 200px; margin-left: 12px"
      >
        <el-option-group
          v-for="group in options"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-option-group>
      </el-select>
      <el-button
        style="margin-left: 12px"
        size="medium"
        type="primary"
        @click="searchFromList(search)"
        >筛选</el-button
      >
      <el-button size="medium" type="info" @click="reSet()">重置</el-button>
    </div>
    <div class="flexBox">
      <el-card
        v-for="(item, index) in list"
        :key="index"
        shadow="always"
        class="box"
        @click.native="openJobDetail(item)"
      >
        <div class="card-info">
          <img
            style="width: 50px; height: 50px"
            src="../../../assets/img/jobs.png"
          />
          <div class="cart-text">
            <span
              style="
                font-weight: bold;
                font-size: 16px;
                color: rgb(65, 151, 46);
              "
              >{{ item.name }}</span
            ><br />
            {{ item.company_name }}<br />
            {{ item.type }}<br />
            {{ item.company_address }}<br />
            {{ item.salary }}<br />
          </div>
        </div>
        <el-divider class="line"></el-divider>
        <div class="card-info introduction">
          职位简介：{{ item.introduction }}
        </div>
      </el-card>
    </div>
    <!-- 信息弹窗 -->
    <el-dialog
      title="岗位信息"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <div class="dialogblock-info">
        <div class="title">{{ dialogItem.name }}</div>
        <div class="infoline">职位人数：{{ dialogItem.count }}</div>
        <div class="infoline">职位类型：{{ dialogItem.type }}</div>
        <div class="infoline">职位资薪：{{ dialogItem.salary }}</div>
        <div class="infoline">工作地址：{{ dialogItem.company_address }}</div>
        <div class="infoline">职位简介：{{ dialogItem.introduction }}</div>
        <div class="infoline">发布时间：{{ dialogItem.created_date }}</div>
        <div class="infoline">更新时间：{{ dialogItem.updated_date }}</div>
        <div class="title">公司介绍</div>
        <div class="infoline">公司名称：{{ dialogItem.company_name }}</div>
        <div class="infoline">公司行业：{{ dialogItem.company_industry }}</div>
        <div class="infoline">公司地址：{{ dialogItem.company_address }}</div>
        <div class="infoline">公司简介：{{ dialogItem.company_introduction }}</div>
        <div class="infoline">注册年份：{{ dialogItem.company_year }}</div>
        <div class="infoline">注册资金：{{ dialogItem.company_capital }}</div>
        <div class="infoline">公司人数：{{ dialogItem.company_people }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
        <el-button size="medium" type="primary" @click="sendNewRecord(dialogItem, dialogItem.company)"
          >投递</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { allJob } from "@/api/job";
import { newRecord } from "@/api/record";
import { localData } from "@/util/local";
import { industryOption } from "@/util/selectOption";
import { dateFormat } from "@/util/common";

export default {
  data() {
    return {
      dialogVisible: false,
      dialogItem: {},
      search: {
        name: "",
        company_address: "",
        company_industry: "",
        company_name: "",
      },
      options: industryOption,
      value: "",
      list: [],
      initlist: [],
      userInfo: {},
    };
  },
  mounted() {
    this.userInfo = localData("get", "userinfo");
    this.getAllJob();
  },
  methods: {
    getAllJob() {
      const param = {
        status: 1,
      };
      allJob(param).then((res) => {
        if (res.code == 200) {
          this.initlist = res.data.Jobs.map((item) => {
            item.company_name = item.company.name;
            item.company_address = item.company.address;
            item.company_industry = item.company.industry;
            item.company_introduction = item.company.introduction;
            item.company_year = item.company.year;
            item.company_capital = item.company.capital;
            item.company_people = item.company.people;
            item.created_date = dateFormat(
              "YYYY-mm-dd HH:MM",
              new Date(item.created_date)
            );
            item.updated_date = dateFormat(
              "YYYY-mm-dd HH:MM",
              new Date(item.updated_date)
            );
            return item;
          });
          this.list = this.initlist;
              this.$nextTick(()=>{
      let CompanyName = this.$route.query.CompanyName
      if(CompanyName){
        this.search.company_name = CompanyName
        this.searchFromList(this.search)
      }
    })
        }
      });
    },
    searchFromList(search) {
      const { name, company_address, company_industry, company_name } = search;
      this.list = this.initlist.filter((item) => {
        return (
          item.name.indexOf(name) !== -1 &&
          item.company_address.indexOf(company_address) !== -1 &&
          item.company_industry.indexOf(company_industry) !== -1 &&
          item.company_name.indexOf(company_name) !== -1
        );
      });
    },
    reSet() {
      this.search = {
        name: "",
        company_address: "",
        company_industry: "",
        company_name: "",
      };
      this.list = this.initlist;
    },
    sendNewRecord(job, company) {
      this.dialogVisible = false
      if(!this.userInfo.student_id){
        this.$message({
            message: "请先去完善个人信息后再进行投递",
            type: "warning",
          });
          return
      }
      const param = {
        Job_name: job.name,
        Job_id: job.id,
        company_name: company.name,
        company_id: company.id,
        user_name: this.userInfo.name,
        user_id: this.userInfo.id,
        student_id: this.userInfo.student_id,
        status: 0,
      };
      console.log(param);
      newRecord(param)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "投递成功",
              type: "success",
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: err.data,
            type: "warning",
          });
        });
    },
    openJobDetail(item) {
      this.dialogItem = { ...item };
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false
      this.dialogItem = {};
    },
  },
};
</script>

<style scoped>
.page {
  /* height: 100vh; */
  /* flex-direction: row;
  width: 100%;
  justify-content: center; */
  /* text-align: center; */
}
.flexBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.box {
  height: 180px;
  width: 260px;
  margin: 20px 0 0 20px;
  border-radius: 8px;
  cursor: pointer;
}
.searchline {
  margin-top: 20px;
  display: flex;
  justify-content: left;
  margin-left: 10px;
}
.card-info {
  display: flex;
  font-size: 12px;
  width: fit-content;
  /* justify-content: space-between; */
}
.line {
  margin: 10px 0 !important;
}
.card-info .cart-text {
  font-size: 12px;
  width: 140px;
  margin-left: 20px;
}
.introduction {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.dialogblock-info {
  width: 100%;
  height: 60vh;
  overflow-y: auto;
}
.dialogblock-info .infoline{
  margin: 10px 0;
  font-size: 18px;

}
.dialogblock-info .title{
  margin: 15px 0;
  font-size: 24px;
  color: rgb(65, 151, 46);
  font-weight:bold ;
}
</style>